/*
   Home 主页
*/
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Square from './../components/Square';

class Home extends Component {
    constructor() {
        super();
        this.state = {
            squares: Array(9).fill(null), //state的不可变性
            xIsNext: true,
            text: 'aaa',
            history: [1, 2, 3, 4, 5]
        };
    }
    handleClick(i) {
        const squares = [...this.state.squares];
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({ squares: squares, xIsNext: !this.state.xIsNext });
    }
    renderSquare(i) {
        return (
            <Square value={this.state.squares[i]}
                onClick={
                    () => this.handleClick(i)
                } />
        )
    }
    renderList() {
        const moves = this.state.history.map((step, move) => {
            return (
                <li key={move} ><a href="#" onClick={() => this.jumpTo(move)} > {step} </a></li>
            );
        });
        return moves;
    }
    jumpTo(move) {
        //this.setState({ });
    }
    onClickBtn(val) {
        this.state.text = val;
    }
    render() {
        const status = 'Next player: X';
        return (<div id="home-container" > { /*search,state可以自定义，获取方法：this.props.location.search，this.props.location.state*/}
            <Link to={{ pathname: '/test', search: '?name=homename', state: { mold: 'add' }, aa: 'dddd' }} className="home-link" > </Link>
            <div onClick={() => this.onClickBtn("ssss")} > {this.state.text} </div>
            <div className="board-row" > {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} </div>
            <div className="board-row" > {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)} </div>
            <div className="board-row" > {this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} </div>
            <div> <Square /></div>
            <ul>{this.renderList()}</ul>
        </div >
        );
    }
}

export default Home;